<script setup>
import LimitFram from "./LimitFrame.vue";
import { getAreaList } from "@/api/pointsMall";
import { deepClone } from "@/utils";
// import AddressList from "@/views/pointsMall/DeliverySetting.vue";

const props = defineProps({
  limit: {
    type: Array,
    required: true,
  },
});
const caderProps = { multiple: true, label: 'cityName', value: 'cityName', emitPath: false }
const blackGroupVisible = ref(false),
  form = ref({ exit: 1, provinceName: [], cityName: [] }),
  cityDataList = ref([]);

const formRef = ref();

const emits = defineEmits(["cancel"]);

const rules = {
  provinceName: [{ required: true, message: "请选择省", trigger: "change" }],
};

// 描述
const ruleText = computed(() => {
  let rule = props.limit.value;
  if (!rule.cityData) return "";
  return `${rule.exit == 1 ? "任意匹配" : "不匹配"} “${
    String(rule.cityData)
  }”`;
});

const queryVipMemInfo = async () => {
  const rs = await getAreaList();
  if (rs.code == 200) {
    cityDataList.value = rs.payload
    cityDataList.value.forEach(item=>{
      item.cityName = item.provinceName
    })
  }
};

const getBlackKeys = () => {
  if (!form.value.cityData.length) {
    ElMessage("请先选择归属地");
    return;
  }
  props.limit.value = deepClone(form.value);
  formatLimit();
  blackGroupVisible.value = false;

};

// 生成表达式
const formatLimit = () => {

  let randomKey = new Date().getTime();
  props.limit.keys = [
    {
      businessType: "user",
      key: `phoneAscription$$_${randomKey}`,
      obj: form.value.cityData,
    },
  ];
  props.limit.expression = `$_user.phoneAscription$$_${randomKey}==${
    form.value.exit == 0 ? false : true
  }`;
};

const addRule = () => {
  if (formRef.value) formRef.value.resetFields();
  blackGroupVisible.value = true;
};

const editRule = () => {
  form.value = deepClone(props.limit.value);
  blackGroupVisible.value = true;
};

const onClose = () => {
  emits("cancel");
};

onMounted(() => {
  queryVipMemInfo();
});

defineExpose({ add: addRule });
</script>
<template>
  <LimitFram title="手机号归属地" :content="ruleText" @edit="editRule" />
  <Dialog
    v-model="blackGroupVisible"
    title="手机号归属地"
    :width="500"
    @confirm="getBlackKeys"
    @close="onClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
      <el-form-item label="类型" prop="exit">
        <el-radio-group v-model="form.exit">
          <el-radio :label="1">任意匹配</el-radio>
          <el-radio :label="0">不匹配 </el-radio>
          <!-- <el-radio :label="2">全匹配</el-radio> -->
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择归属地">
        <el-cascader :options="cityDataList" v-model="form.cityData" :show-all-levels='false' size="default" :props="caderProps" clearable/>
      </el-form-item>
    </el-form>

  </Dialog>
</template>

<style lang="scss" scoped>
.el-select-v2 {
  min-width: 70%;
}
:deep(.el-cascader) {
  width: 100%;
}
:deep(.el-tag.el-tag--info) {
  color: var(--el-color-primary);
}
:deep(.icon-arrow-down:before) {
  content: "";
}
</style>
